<script setup lang="ts">
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { useNav } from "@/layout/hooks/useNav";
import type { FormInstance } from "element-plus";
import { useLayout } from "@/layout/hooks/useLayout";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { ref, reactive, onMounted, onBeforeUnmount, type Ref } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import { functions } from "@vueuse/core/metadata.cjs";

defineOptions({
  name: "Login"
});
const router = useRouter();
const loading = ref(false);
const ruleFormRef = ref<FormInstance>();

const { initStorage } = useLayout();
initStorage();

//深色模式
const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
const wave_color: Ref<string> = ref<string>("#00C0FF");
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
function changeColor() {
  dataThemeChange(overallStyle.value);
  wave_color.value =
    useEpThemeStoreHook().epTheme !== "light" ? "#005588" : "#00C0FF";
}

//微信ua检测
const is_wx: Ref<boolean> = ref<boolean>(
  navigator.userAgent.toLowerCase().includes("micromessenger")
);
const APPID = "nd9c7a7f4aea7c09c4";
//const APPID = "nd4f60c50ae22887bc";
const WEBURL = location.origin + "/#/";
const redirectUrl = encodeURIComponent(WEBURL + "AI");
const jump_url: Ref<string> = ref<string>(
  `https://oauth.henau.edu.cn/oauth2_qr_connect/login?appid=${APPID}&redirect_uri=${redirectUrl}&response_type=code&scope=henauapi_login`
);

function wechatLogin() {
  window.location.href = jump_url.value;
}

// 在微信环境下自动登录
onMounted(() => {
  if (is_wx.value) {
    // 直接跳转，不显示加载动画
    setTimeout(() => {
      window.location.href = jump_url.value;
    }, 300);
  }
});
</script>

<template>
  <!-- 微信环境下只显示纯白色背景，无加载动画 -->
  <div v-if="is_wx" class="wx-blank-container" />

  <!-- 非微信环境下显示正常登录页 -->
  <div
    v-else
    id="main-win"
    class="select-none dark:bg-[#000000] bg-[#ffffff] transition-colors duration-300 w-screen h-screen"
  >
    <!--深色模式按钮-->
    <div class="flex-c absolute right-5 top-3 z-30">
      <el-switch
        v-model="dataTheme"
        inline-prompt
        :active-icon="dayIcon"
        :inactive-icon="darkIcon"
        @change="changeColor"
      />
    </div>
    <div class="relative login_center w-screen h-screen z-20">
      <div id="center-block">
        <div
          id="fuzzy"
          class="dark:bg-[#C0C0C07F] bg-[#e0e0e07F] transition-colors duration-300 !flex-row"
        >
          <!-- 左半边 -->
          <div
            id="left-block"
            class="login_center left-0 w-1/2 h-full bg-blue-400 dark:bg-blue-900 transition-colors duration-300 rounded-s-3xl"
          >
            <h2 class="text-[#F0F0F0]">农宝通后台管理</h2>
            <img src="@/assets/调试中.png" style="width: 500px" alt="." />
          </div>
          <!-- 右半边 -->
          <div class="login_center md:w-1/2 h-full w-full">
            <h2 class="md:hidden flex-row top-2 relative mb-10">
              <img
                src="../../assets/login/icon.png"
                style="width: 30px"
                alt="."
              />
              农宝通后台管理
            </h2>
            <iframe v-if="!is_wx" class="h-[80%] rounded-md" :src="jump_url" />
            <!--微信适配-->
            <div v-else class="login_center">
              <input
                type="button"
                value="一键快速授权登录"
                class="bg-gradient-to-r from-blue-600 to-blue-300 dark:to-blue-900 text-white m-3 px-4 py-2 rounded cursor-pointer"
                @click="wechatLogin"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="wave-container">
      <div class="wave">
        <!-- 波长延长到两倍 -->
        <svg viewBox="0 0 1440 320" preserveAspectRatio="none">
          <path
            d="M0,160 C240,320 480,0 720,160 C960,320 1200,0 1440,160 L1440,320 L0,320 Z"
            class="fill-blue-300 dark:fill-blue-700"
          />
        </svg>
      </div>
    </div>
    <p
      class="absolute w-[99%] bottom-1 text-sm text-black dark:text-white"
      style="text-align: center"
    >
      Copyright © 2025-present 会议实时记录平台
    </p>
  </div>
</template>
<style lang="scss" scoped>
@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%); /* 移动半个波长 */
  }
}

@keyframes start {
  from {
    width: 0;
    height: 0;
  }

  to {
    right: 60%;
    height: 80%;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@media (width <= 768px) {
  #main-win {
    background-image: none;
  }

  #center-block {
    position: absolute;
    top: 50%;
    right: auto;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
    animation: start 0.5s;
  }

  #left-block {
    display: none;
  }
}

:deep(.el-input-group__append, .el-input-group__prepend) {
  padding: 0;
}

.wave-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  animation: wave-animation 4s linear infinite;

  svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.login_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.full {
  width: 100%;
  height: 100%;
}

#center-block {
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60%;
  height: 80%;
  animation: start 1s;
}

#fuzzy {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #d3d3d34c;
  backdrop-filter: blur(12px);
  border-radius: 2rem;
  box-shadow: 10px 10px 20px 5px #00000030;
}

#main-win {
  overflow: hidden;
  background-image: url("@/assets/svg/数据时代.svg"),
    url("@/assets/svg/加载中.svg");
  background-repeat: no-repeat;
  background-position:
    left 200px,
    right 450px;
  background-size: 20vw, 20vw;
}

#left-block {
  display: auto;
}

/* 微信环境下的样式 - 仅保留纯白背景 */
.wx-blank-container {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
</style>
